<template>
<view class="search_view">
	<u-navbar
		ref="navbar"	
		back-icon-name="arrow-leftward" 
		title=" "
		:background="{
			background: '#5C77FF',
		}"
		back-icon-color="#ffffff">
		<view class="search">
			<u-search 
				placeholder="项目名称/负责人/类型"
				bg-color="#ffffff"
				:show-action="false"
				v-model="inputData"
				:height="60"
				@search="onSearch">
			</u-search>
		</view>
	</u-navbar>
	<view 
		class="container">
		<SearchContainerCp
			v-show="show"
			:keyWord="keyWord"
			@change="onChange">
		</SearchContainerCp>
		<template
			v-if="!show">
			<SearchItemCp
				v-for="(item,index) in dataList"
				:key="index"
				:itemData="item">
			</SearchItemCp>
		</template>
	</view>
	<u-toast ref="uToast"/>
</view>
</template>

<script>
//搜索页面
import SearchItemCp from "@/components/search/SearchItem.vue"
import SearchContainerCp from "@/components/search/SearchContainer.vue"
import {getSearchTypes} from "@/common/Api";
export default {
	name:'SearchView',
	components:{SearchItemCp,SearchContainerCp},
	data() {
		return {
			inputData:'',  //输入框里的值
			keyWord:'',  //用来记录搜索历史用的
			show:true,  //是否显示搜索面板
			pageList:[],  //每一页对应的数据(二维数组)
			page:0,  //已请求的页数
		};
	},
	computed:{
		dataList(){  //将二维pageList平铺
			let dataList = [];
			for(let item of this.pageList){
				dataList.push(...item);
			}
			return dataList;
		},
	},
	onReachBottom() {  //页面到达底部时触发
		if(!this.show){
			this.getData(this.page+1,this.keyWord);
		}
	},
	methods:{
		onSearch(){  //搜索按钮点击事件
			if(!this.inputData){
				this.show = true;
				return;
			}
			this.show = false;
			this.keyWord = this.inputData;
			this.getData(1,this.keyWord);
		},
		getData(page,keyWord=''){  //获取数据
			uni.showLoading({
				title: '加载中',
			});
			this.$ajax({
				url: '/wx/project',
				method: 'GET',
				data:{
					page:page,
					size:10,
					keyWord,
				},
				success: res => {
					let data = res.data.data;
					this.page = data.pages.page;
					this.$set(this.pageList,this.page-1,data.pages.list);  //索引必须是页数减一
					this.pageList.length = page;  //数组的长度必须和页数对应
				},
				complete: res =>{
					if(page === 1){
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 100,
						});
					}
					uni.hideLoading();
				}
			});
		},
		onChange(item){  //历史记录选择
			this.inputData = item;
			this.onSearch();
		},
	},
}
</script>

<style lang="scss">
.search_view{
	width: 100vw;
	min-height: 100vh;
	.search{
		width: 100%;
		margin: 0 10px;
	}
	.container{
		width: 100vw;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		background-color: #ffffff;
		.title{
			font-size: 13px;
			color: #828282;
			margin-bottom: 15px;
		}
		.content{
			margin-bottom: 20px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			u-tag{
				margin: 0px 5px 5px 0;
				>view{
					padding: 10px 15px;
					display: flex;
					flex-direction: row;
					justify-content:center;
					align-items: center;
					text-align: center;
					font-size: 13px !important;
				}
			}
		}
	}
}
</style>
